import { h } from 'vue';
import { NTag, NTooltip, NImage } from 'naive-ui';
import { BasicColumn } from '@/components/Table';

// 状态映射
const statusMap = {
  success: { text: '成功', type: 'success' as const },
  done: { text: '完成', type: 'success' as const },
  fail: { text: '失败', type: 'error' as const },
  init: { text: '处理中', type: 'warning' as const },
  pending: { text: '待处理', type: 'warning' as const },
};

// 业务类型映射
const btypeMap = {
  common: '普通回款',
  urgent: '紧急回款',
};

export const columns: BasicColumn[] = [
  {
    title: '订单编号',
    key: 'order_id',
    width: 180,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '业务类型',
    key: 'btype',
    width: 100,
    render(record) {
      return btypeMap[record.btype] || record.btype;
    },
  },
  {
    title: '回款金额',
    key: 'money',
    width: 100,
    render(record) {
      return `¥${parseFloat(record.money).toFixed(2)}`;
    },
  },
  // {
  //   title: '打款人姓名',
  //   key: 'realname',
  //   width: 100,
  // },
  // {
  //   title: '银行名称',
  //   key: 'channel_bank',
  //   width: 180,
  //   ellipsis: {
  //     tooltip: true,
  //   },
  // },
  // {
  //   title: '银行卡号',
  //   key: 'channel_bankno',
  //   width: 180,
  //   ellipsis: {
  //     tooltip: true,
  //   },
  // },
  // {
  //   title: '持卡人',
  //   key: 'channel_realname',
  //   width: 100,
  // },
  {
    title: '状态',
    key: 'status',
    width: 80,
    render(record) {
      const status = statusMap[record.status] || { text: record.status, type: 'default' as const };
      return h(NTag, { type: status.type }, { default: () => status.text });
    },
  },
  {
    title: '凭证',
    key: 'attach',
    width: 80,
    render(record) {
      if (!record.attach) return '-';
      
      return h(
        NImage,
        {
          width: 50,
          height: 50,
          src: record.attach,
          previewSrc: record.attach,
          objectFit: 'cover',
          style: {
            cursor: 'pointer',
          },
        }
      );
    },
  },
  {
    title: '备注',
    key: 'remark',
    width: 120,
    ellipsis: {
      tooltip: true,
    },
    render(record) {
      if (!record.remark) return '-';

      const displayText = record.remark.length > 20 ? `${record.remark.slice(0, 20)}...` : record.remark;

      return h(
        NTooltip,
        {},
        {
          trigger: () => h('span', displayText),
          default: () => record.remark,
        }
      );
    },
  },
  {
    title: '创建时间',
    key: 'created_at',
    width: 140,
  },
  {
    title: '更新时间',
    key: 'updated_at',
    width: 140,
  },
];